<!DOCTYPE html>
<html>
  <head>
    <title>Store Locator Library for Maps API</title>
    <style type="text/css">
        @import 'https://developers.google.com/css/screen.css';
        body {
          padding: 1em;
          max-width: 60em;
          min-width: inherit;
        }
        p {
          margin: 0.75em 0;
        }
    </style>
  </head>
  <body>
    <h1 class="page-title">Store Locator Library for Maps API</h1>
    <p>
      This library enables developers to easily build store locator-type
      applications using the Google Maps API.
    </p>
    <p>The library provides the following features:</p>
    <ul>
      <li>Pluggable data source &ndash; display stores from a data source of
        your choosing</li>
      <li>HTML5 Geolocation &ndash; determines a good initial viewport for the
        user</li>
      <li>Info window &ndash; shows details about a store</li>
      <li>Street View</li>
      <li>Extensible &ndash; customise your own markers, info windows, etc.</li>
      <li>Fully-featured side panel, providing:
        <ul>
          <li>Feature filtering</li>
          <li>Autocomplete search</li>
          <li>List of nearby stores</li>
          <li>Directions</li>
        </ul>
      </li>
    </ul>

    <h2>Examples/Demos</h2>
    <p>
      The best way to become acquainted with the library is to see some of the
      examples:
    </p>
    <ol>
      <li><a href="examples/panel.html">panel.html</a> &ndash; A simple store
        locator, including panel. Data is fetched from a static CSV file.</li>
        <li><a href="examples/dynamic.html">dynamic.html</a> &ndash; Same as
        above, except stores are fetched dynamically from a Google App Engine
        app.</li>
      <li><a href="examples/custom.html">custom.html</a> &ndash; Various
        customisations to the default UI including custom markers and info
        window.</li>
      <li><a href="examples/places.html">places.html</a> &ndash; Places are
        searched using the Google Places API, and displayed as a store
        locator.</li>
    </ol>

    <h2>Reference documentation</h2>
    <p>
      For detailed documentation on the library, including classes, events and
      sample usage, please see the <a href="reference.html">reference
      documentation</a>.
    </p>

    <h2>Quick Start</h2>
    <p>
      To get started, include the <a href="js/store-locator.compiled.js">
      <code>store-locator.compiled.js</code></a> file on your HTML page. A
      set of <a href="css/storelocator.css">CSS styles</a> are also available,
      which provide styling for store details and side panel.
    </p>
    <p>
      The library's functions are contained under the <code>storeLocator</code>
      namespace. The main class is called <code>storeLocator.View</code>. A
      <code>View</code> has two required parameters, a
      <code>google.maps.Map</code>, and a <code>storeLocator.DataFeed</code>.
    </p>
    <p>
      A <code>DataFeed</code> is an object with the function
      <code>getStores</code>. This function is called each time the map needs an
      update. A simple example of a <code>DataFeed</code> can be found in the
      <a href="reference.html#storeLocator.DataFeed">reference</a>.
    </p>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12846745-17']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
  </body>
</html>
